@charset "utf-8";
@import "config";
//*需要用到input样式*/
.select-drop-down{
  display: inline-block;
  position: relative;
  margin-right: 10px;
  .select-control{ position: relative;
    &:after{ top: 0; content: '\e69e'; display: block; position: absolute; right: 10px; @include height(38px); transition: all .2s; transform: rotate(90deg); cursor: pointer; font-family: "iconfont"; font-size: 18px; }
  }
  .drop-down{
    position: absolute;
    left: 0;
    top: nth($global-input,6)+1;
    width: 100%;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto; z-index: 100;
    li{
      line-height: 30px;
      padding-left: 10px;
      &:hover{
        background: #f8f8f8;
      }
      &.disabled{
        font-style: italic;
        cursor: not-allowed
      }
      &.active{
        background: #36a1d3;
        color: #fff
      }
    }
    .drop-down-border{
      border: 1px solid #f60;
      overflow-x: hidden;
      overflow-y: auto;
      /*animation: dropDown .6s;*/
    }
  }
  &.open{
    z-index: 10;
    //这里引用输入框的焦点样式
    .select-control .input{
      border-color: #666;
      color: #666;
    }
    .drop-down{

    }
    .select-control{
      &:after{ transform: rotate(-90deg); }
    }
  }
  &.select-search-box{
    .input-control{
      position: relative;
      margin: 10px 0;
    }
  }
}
.select-drop-enter-active{ animation: selectDropDown .3s; transform-origin: center top; }
.select-drop-leave-active{ transform-origin: center top;animation: selectDropUp .3s;z-index: 99; }
@keyframes selectDropDown{
  0%{ opacity: 0; transform: scaleY(0); }
  100%{ opacity: 1; transform: scaleY(1); }
}
@keyframes selectDropUp{
  0%{ opacity: 1; transform: scaleY(1); }
  100%{ opacity: 0; transform: scaleY(0); }
}
